<template>
    <a-row>
        <a-row class="mytitle">
            <!-- <a-icon :component='general' style="margin:0 .5rem 0 0" /> -->
            {{$t('Overview')}}
        </a-row>

        <NoAuthPage v-showNoAuth="'D2-1'"/>

        <!-- 顶部信息 -->
        <a-row v-userAuth="'D2-1'">
            <a-row :gutter='16' style="margin: 1em  0.5em 0.5em 0.5em;">
                <a-col :span="24" style="color:white;">
                    <div class='bg_blue' >
                        <span class='title0'><a-icon  :component = "net" style="margin-right:.5rem"></a-icon>{{$t('Block')}} </span>
                        <a-row class='bg_content'>
                            <a-col :span='12'>
                                <p class="overflow-text" :title="$t('Pool')+$t('Amount')+'('+$t('Piece')+')'">{{$t('Pool')}}{{$t('Amount')}}({{$t('Piece')}})：</p>
                                <p class='data_font overflow-text' :title="storedata.rbd ? storedata.rbd.pool_num : 0">{{storedata.rbd ? storedata.rbd.pool_num : 0}}</p>
                            </a-col>
                            <a-col :span='12'>
                                <p>{{$t('Used-space')}}：</p>
                                <p class='data_font overflow-text' :title="storedata.rbd ? storedata.rbd.used : 0">{{storedata.rbd ? storedata.rbd.used : 0}}</p>
                            </a-col>
                            <a-col :span='24'>
                                <p>{{$t('Block')}}{{$t('Amount')}}({{$t('Piece')}})：</p>
                                <p class='data_font overflow-text' :title="storedata.rbd ? storedata.rbd.rbd_num : 0">{{storedata.rbd ? storedata.rbd.rbd_num : 0}}</p>
                            </a-col>
                        </a-row>
                    </div>
                </a-col>
                <a-col :span="24" style="color:white;margin-top: 0.5em;">
                    <div class='bg_yellow'>
                        <span class='title1'><a-icon  :component = "file" style="margin-right:.5rem"></a-icon>{{$t('File-system')}}</span>
                        <a-row class='bg_content'>
                            <a-col :span='12'>
                                <p>{{$t('Status')}}：</p>
                                <p class='data_font overflow-text'>{{storedata.fs ? (storedata.fs.status == true ? $t('Survive') : $t('Error')) : $t('Error')}}</p>
                            </a-col>
                            <a-col :span='12'>
                                <p>{{$t('Data-usage')}}：</p>
                                <p class='data_font overflow-text' :title="storedata.fs ? storedata.fs.data : 0">{{storedata.fs ? storedata.fs.data : 0}}</p>
                            </a-col>
                            <a-col :span='12'>
                                <p>{{$t('Metadata-usage')}}：</p>
                                <p class='data_font overflow-text' :title="storedata.fs ? storedata.fs.meta : 0">{{storedata.fs ? storedata.fs.meta : 0}}</p>
                            </a-col>
                            <a-col :span='12'>
                                <p>{{$t('File-index')}}({{$t('Piece')}})：</p>
                                <p class='data_font overflow-text' :title="storedata.fs ? storedata.fs.inos : 0">{{storedata.fs ? storedata.fs.inos : 0}}</p>
                            </a-col>
                        </a-row>
                    </div>
                </a-col>
                <a-col :span="24" style="color:white;margin-top: 0.5em;">
                    <div  class='bg_pink'>
                        <span  class='title2'><a-icon  :component = "obj" style="margin-right:.5rem"></a-icon>{{$t('Object-storage')}}</span>
                        <a-row  class='bg_content'>
                            <a-col :span='12'>
                                <p>{{$t('Port')}}：</p>
                                <p class='data_font overflow-text' :title="storedata.rgw ? storedata.rgw.port : 0">{{storedata.rgw ? storedata.rgw.port : 0}}</p>
                            </a-col>
                            <a-col :span='12'>
                                <p>{{$t('User')}}({{$t('Piece')}})：</p>
                                <p class='data_font overflow-text' :title="storedata.rgw ? storedata.rgw.user_num : 0">{{storedata.rgw ? storedata.rgw.user_num : 0}}</p>
                            </a-col>
                            <a-col :span='12'>
                                <p>{{$t('Data-usage')}}：</p>
                                <p class='data_font overflow-text' :title="storedata.rgw ? storedata.rgw.used : 0">{{storedata.rgw ? storedata.rgw.used : 0}}</p>
                            </a-col>
                            
                            <a-col :span='12'>
                                <p>{{$t('Bucket')}}({{$t('Piece')}})：</p>
                                <p class='data_font overflow-text' :title="storedata.rgw ? storedata.rgw.bucket_num : 0">{{storedata.rgw ? storedata.rgw.bucket_num : 0}}</p>
                            </a-col>
                        </a-row>
                    </div>
                </a-col>
            </a-row>
        </a-row>
        <!-- <a-row style="margin: 1em"> -->
            <!-- <Poolmgr style="margin: 1em" v-userAuth="'D2-2'"></Poolmgr> -->
        <!-- </a-row> -->
    </a-row>        
</template>
<script>
import Topbar from '../../../components/common/Topbar'
import Menubar from '../../../components/common/Menubar'
// import Poolmgr from '../../../components/storage_mgr/overview/poolmgr'
import net from '../../../../static/images/svg/ic_Networkdisk03.svg'
import file from '../../../../static/images/svg/ic_filesystem02.svg'
import obj from '../../../../static/images/svg/ic_Objectstorage03.svg'
// import general from '../../../../static/images/svg/ic_general.svg'
import NoAuthPage from '@/components/common/NoAuthPage'

import request from '@/request/request'

export default {
    name:'overview',
    components:{Topbar, Menubar, NoAuthPage},
    template: '<a-icon :component = "net,file,obj," />',//general
    data(){
        return{
            net,
            file,
            obj,
            // general,
            basedata:{},
            storedata:'',
            erasuretyple:[],
            timeoutId:''
        }
    },
    methods:{
        getstoredata(){
    		request('get', 'index/status/store').then(res=>{
                this.storedata = res.data
                // this.storedata.rbd.used = this.bytesToBs(res.data.rbd.used)
                // this.storedata.fs.data = this.bytesToBs(res.data.fs.data)
                // this.storedata.fs.meta = this.bytesToBs(res.data.fs.meta)
                // this.storedata.rgw.used = this.bytesToBs(res.data.rgw.used)
    		})
    	},
    	getbasedata(){
    		// this.$axios.get(this.allurl+'pool/_info').then(res=>{
    		request('get', 'ops/conf/crush_rule/').then(res=>{
                // console.log('获取crush列表', res)
    			this.$store.commit('indexmsg', {
            		basedata: res.data,
            	})
    		})
        },
        // bytesToBs(limit) {            //单位的转换
        //     var size = "";
        //     if (limit < 1 * 1000) { //如果小于0.1k转化成B
        //     size = limit.toFixed(1) + " B";
        //     } else if (limit < 1 * 1000 * 1000) {//如果小于0.1M转化成K
        //     size = (limit / 1000).toFixed(1) + " K";
        //     } else if (limit < 1 * 1000 * 1000 * 1000) { //如果小于0.1G转化成M
        //     size = (limit / (1000 * 1000)).toFixed(1) + " M";
        //     } else if (limit < 1 * 1000 * 1000 * 1000 * 1000) { //如果小于0.1T转化成G
        //     size = (limit / (1000 * 1000 * 1000)).toFixed(1) + " G";
        //     } else { //其他转化成TiB
        //     size = (limit / (1000 * 1000 * 1000* 1000)).toFixed(1) + " T";
        //     }
        //     var sizestr = size + "";
        //     var len = sizestr.indexOf("\.");
        //     var dec = sizestr.substr(len + 1, 2);
        //     if (dec == "00") {//当小数点后为00时 去掉小数部分
        //     return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
        //     }
        //     return sizestr;
        // },
    },
    mounted(){
        // this.getbasedata()
        this.getstoredata()
        // this.timeoutId = setInterval(this.getstoredata, 30000); //定时刷新页面数据
    }, 
    destroyed(){
        // clearInterval(this.timeoutId); //清除定时器
    },
    computed:{
    	indexmsg() {
	        return this.$store.state.basedata
	    },
    }
}
</script>
<style scoped>
.bg_blue{
    background-color:#04A0FE;
    border-radius:.1em;
    box-shadow:2px 3px 8px #ccc;
}
.bg_yellow{
    background-color:#FFC40E;
    border-radius:.1em;
    box-shadow:2px 3px 8px #ccc;
}
.bg_pink{
    background-color:#FD76B0;
    border-radius:.1em;
    box-shadow:2px 3px 8px #ccc;
}
.title2{
    background-color:white;
    color:#FD76B0;
    margin-top:.5em;
    padding:.3em 1.5em .3em 1em;
    display:inline-block;
    border-left:1px solid grey;
    font-weight:600;
}
.title1{
    background-color:white;
    color:#FFC40E;
    margin-top:.5em;
    padding:.3em 1.5em .3em 1em;
    display:inline-block;
    border-left:1px solid grey;
    font-weight:600;
}
.title0{
    background-color:white;
    color:#0BBCFF;
    margin-top:.5em;
    padding:.3em 1.5em .3em 1em;
    display:inline-block;
    border-left:1px solid grey;
    font-weight:600;
}
.title0 i svg image,.title1 i svg image,.title2 i svg image,.mytitle i svg image{
    width:14px;
    height:14px;
}
.bg_content{
    padding:0 1.5em 1.5em 1.5em;
    font-size:14px;
}
.data_font{
    font-weight:700;
    font-size:2em;
    /* text-indent: 2rem; */
}
.overflow-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
